import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import { FilterItem } from 'components'
import { Form, Button, Row, Col, DatePicker, Input, InputNumber, Radio, Switch, Select, Checkbox } from 'antd'
import { basicDictTypeData } from 'utils/seletLocalData'
import { converDate, SelectProps } from 'utils'

const Search = Input.Search
const { RangePicker } = DatePicker
const Option = Select.Option
const CheckboxGroup = Checkbox.Group
const FormItem = Form.Item

const formItemLayout = {
  labelCol: {
    span: 10,
  },
  wrapperCol: {
    span: 14,
  },
}

const dateFormat = 'DD/MM/YYYY'
const plainOptions = ['byCustomerId', 'byFromCurrencyCode', 'byToCurrencyCode', 'tripartiteTransaction']

const Filter = ({
  onFilterChange,
  filter,
  event,
  userListAll,
  codeListAll,
  form: {
    getFieldDecorator,
    getFieldsValue,
    setFieldsValue,
  },
}) => {
  const handleFields = () => {
    let fields = { ...filter, ...getFieldsValue() }
    const { GroupBy, createTime } = fields
    plainOptions.forEach((item) => {
      if (GroupBy.indexOf(item) > -1) {
        item = item === 'tripartiteTransaction' ? 'three' : item
        fields[item] = true
      } else {
        item = item === 'tripartiteTransaction' ? 'three' : item
        fields[item] = false
      }
    })
    if (createTime.length > 1) {
      [fields.createTimeStart, fields.createTimeEnd] = [
        createTime[0].format('YYYY-MM-DD 00:00:00'),
        createTime[1].format('YYYY-MM-DD 00:00:00'),
      ]
    } else {
      [fields.createTimeStart, fields.createTimeEnd] = [
        undefined, undefined,
      ]
    }
    fields.createTime = undefined
    fields.GroupBy = undefined
    return fields
  }
  const handleSubmit = () => {
    onFilterChange(handleFields())
  }
  const handleReset = () => {
    const fields = getFieldsValue()
    for (let item in fields) {
      if ({}.hasOwnProperty.call(fields, item)) {
        if (fields[item] instanceof Array) {
          fields[item] = []
        } else {
          fields[item] = undefined
        }
      }
    }
    setFieldsValue(fields)
    handleSubmit()
  }
  const handlerExcel = () => {
    event.emit('excel', handleFields())
  }
  const groupDefaultValue = () => {
    let arr = []
    plainOptions.forEach((item) => {
      if (filter[item] && filter[item] !== 'false') {
        arr.push(item)
      }
    })
    if (filter.three && filter.three !== 'false') {
      arr.push('tripartiteTransaction')
    }
    return arr
  }

  // 处理时间
  const { createTimeStart, createTimeEnd } = filter
  let initialCreateTime = []
  if (createTimeStart && createTimeEnd) {
    initialCreateTime = [moment(converDate(createTimeStart.split(' ')[0]), dateFormat), moment(converDate(createTimeEnd.split(' ')[0]), dateFormat)]
  }

  // 用户列表
  const userListData = userListAll.map(d => <Option key={d.id} title={d.username} >{d.username}</Option>)
  // currencyCode列表
  const codeListData = codeListAll.map(d => <Option key={d.code} title={d.code} >{d.code}</Option>)
  return (
    <div>
      <Row>
        <Col span={8}>
          <FormItem label="Createtime" {...formItemLayout}>
            {getFieldDecorator('createTime', { initialValue: initialCreateTime })(
              <RangePicker style={{ width: '100%' }} size="large" format={dateFormat} />
            )}
          </FormItem>
        </Col>
        <Col span={8}>
          <FormItem label="AmountMax" {...formItemLayout}>
            {
              getFieldDecorator('amountMax',
                {
                  initialValue: filter.amountMax,
                })(<InputNumber style={{ width: '100%' }} />)
            }
          </FormItem>
        </Col>
        <Col span={8}>
          <FormItem label="AmountMin" {...formItemLayout}>
            {
              getFieldDecorator('amountMin',
                {
                  initialValue: filter.amountMin,
                })(<InputNumber style={{ width: '100%' }} />)
            }
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span={8}>
          <FormItem label="createUser" {...formItemLayout}>
            {getFieldDecorator('createUserId', { initialValue: filter.createUserId })(<Select {...SelectProps} style={{ width: '100%' }}>{userListData}</Select>)}
          </FormItem>
        </Col>
        <Col span={15}>
          <FormItem label="GroupBy" labelCol={{ span: 6 }} wrapperCol={{span: 18}}>
            {
              getFieldDecorator('GroupBy', {
                initialValue: groupDefaultValue(),
              })(
                <CheckboxGroup options={plainOptions} />
              )
            }
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span={8}>
          <FormItem label="fromCurrency" {...formItemLayout}>
            {getFieldDecorator('fromCurrencyCode', { initialValue: filter.fromCurrencyCode })(<Select {...SelectProps} style={{ width: '100%' }}>{codeListData}</Select>)}
          </FormItem>
        </Col>
        <Col span={8}>
          <FormItem label="toCurrency" {...formItemLayout}>
            {getFieldDecorator('toCurrencyCode', { initialValue: filter.toCurrencyCode })(<Select {...SelectProps} style={{ width: '100%' }}>{codeListData}</Select>)}
          </FormItem>
        </Col>
      </Row>
      <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', marginBottom: '10px' }}>
        <div >
          <Button type="primary" size="large" className="margin-right" onClick={handleSubmit}>Search</Button>
          <Button size="large" onClick={handleReset}>Reset</Button>
        </div>
        <div>
          <Button size="large" type="ghost" onClick={handlerExcel}>Excel</Button>
        </div>
      </div>
    </div>
  )
}

Filter.propTypes = {
  onAdd: PropTypes.func,
  form: PropTypes.object,
  filter: PropTypes.object,
  onFilterChange: PropTypes.func,
  event: PropTypes.object,
  userListAll: PropTypes.array,
  codeListAll: PropTypes.array,
}

export default Form.create()(Filter)
